<template>
  <div class="info">
    <el-form label-position="left" label-width="150px">
      <el-form-item label="举报人">{{
        info.user && info.user.nickname
      }}</el-form-item>

      <el-form-item label="举报人头像">
        <el-avatar
          v-if="info.user"
          shape="square"
          :size="60"
          :src="info.user.avatar"
        ></el-avatar>
      </el-form-item>

      <el-form-item label="黑名单来源">{{ info.source_text }}</el-form-item>

      <el-form-item label="身份（失信人）">
        {{ info.identity_text }}</el-form-item
      >

      <el-form-item label="失信人姓名"> {{ info.name }}</el-form-item>
      <el-form-item label="身份证号"> {{ info.id_number }}</el-form-item>

      <el-form-item label="微信号"> {{ info.wechat }}</el-form-item>
      <el-form-item label="微信昵称"> {{ info.nickname }}</el-form-item>
      <el-form-item label="性别"> {{ info.sex_text }}</el-form-item>
      <el-form-item label="手机号"> {{ info.mobile }}</el-form-item>
      <el-form-item label="举报理由">
        <div style="width: 50%">{{ info.reason }}</div></el-form-item
      >
      <el-form-item label="举报时间"> {{ info.create_time }}</el-form-item>
      <el-form-item label="举报证据">
        <div
          style="display: inline-block"
          v-for="(item, index) in info.images"
          :key="index"
        >
          <el-image
            style="margin-right: 10px; width: 200px; height: 200px"
            shape="square"
            :src="item"
            :preview-src-list="info.images"
          ></el-image>
        </div>
      </el-form-item>
    </el-form>
    <div v-if="info.audit_status == 1" class="action">
      <el-button type="warning" @click="handleAudit">立即审核</el-button>
    </div>

    <el-dialog title="审核" :visible.sync="showDialog" width="30%">
      <el-radio-group v-model="status">
        <el-radio :label="2">通过</el-radio>
        <el-radio :label="3">拒绝</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ok(0)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getInfo, postAudit } from "@/api/blacklists";

export default {
  name: "balcklistInfo",
  components: {},
  data() {
    return {
      showDialog: false,
      status: "",
      info: {},
      id: this.$route.query.id,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await getInfo({ id: this.id });
      if (res.data) {
        this.info = res.data;
      }
    },
    // 审核
    handleAudit() {
      this.showDialog = true;
    },
    // 取消审核
    cancel() {
      this.showDialog = false;
      this.status = "";
    },
    /** 确定审核
     * 立即审核 2：一键通过 3：一键拒绝
     *
     */
    async ok() {
      if (!this.status) {
        return this.$message({
          message: "请选择审核状态",
          type: "warning",
        });
      }
      let postData = {
        id: [this.id],
        status: this.status,
      };
      const res = await postAudit(postData);
      if (res) {
        this.$router.go(-1);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.action {
  padding-left: 150px;
}
.info {
  padding-left: 50px;
}
</style>